<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>隔行变色并且鼠标指向变色的表格</title>
    <style type="text/css">
        table{border: 0;border-collapse: collapse;}
        td{font: normal 12px/17px Arial;padding: 2px;width: 100px ;}
        th{
            font: bold 12px/17px Arial;
            text-align: left;
            padding: 4px;
            border-bottom: 1px solid #333;
        }
        .odd{background: #cef;}
        .even{background: #ffc;}
        .light{background: blue}
    </style>
    <script src="C:\Users\86198\Desktop\yl-dsj\JS\jquery-3.6.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("tbody tr:odd").addClass("odd")
        $("tbody tr:even").addClass("even")
        $("tbody tr").hover(
            function() {$(this).addClass("light");},
            function() {$(this).removeClass("light");}
        )
    })
    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>商品名称</th>
                <th>商品数量</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>美白滋养霜</td>
                <td>200</td>
            </tr>
            <tr>
                <td>002</td>
                <td>美白润体乳</td>
                <td>150</td>
            </tr>
            <tr>
                <td>003</td>
                <td>美白面膜</td>
                <td>80</td>
            </tr>
            <tr>
                <td>004</td>
                <td>美白柔肤水</td>
                <td>120</td>
            </tr>
        </tbody>
    </table>
    
</body>
</html>